<template>
  <h3>setup 语法糖</h3>
  <div>
    <p>{{ str }}</p>
    <p>{{ str2 }}</p>
    <button type="button" @click="changeStr">修改str</button>
    <div style="height: 5px; background-color: blueviolet; width: 100%"></div>
    <MyComp></MyComp>
    <hr />
    <MyComp />
  </div>
</template>

<script>
export default {
  name: 'Study1StuDemo5'
}
</script>

<script setup>
import { ref } from 'vue'
import MyComp from '@/views/study2/StuDemo2.vue'

// setup中访问this是undefined。
console.log(this) // undefined

// 普通变量
let str = '我是组合式api的普遍变量'

// 响应式变量
const str2 = ref('我是响应式变量')

const changeStr = () => {
  // str2.value = '我是响应变量，我可以出发UI的更新'

  console.log('changeStr')
  str = '我不能响应式显示UI的效果，修改我没用'
  console.log(str)

  fun1()
}

const fun1 = () => {
  console.log('fun1')
}

// setup函数返回的对象中的内容，可直接在模板中使用。
</script>

<style lang="scss" scoped>
h3 {
  color: rgb(195, 198, 35);
  font-size: large;
}
</style>
